<template>
  <div>
   <nav-bar name="我的成绩"></nav-bar>
      <div class="top" v-if="userinfo">
          <div>
              <h2>成绩查询</h2>
               <div>学号：{{userinfo.Sno}}</div>
               <div>姓名：{{userinfo.name}}</div>
          </div>
          <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-chengjichaxun"></use>
        </svg>
          </div>
      </div>
      <div class="grade-items">
           <div v-for="(item,index) in grade" :key="index">{{item}}</div>
      </div>
       <div class="button" @click="$router.go(-1)">
           <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-houtui"></use>
        </svg>
       </div>
  </div>
</template>

<script>
import navBar from '@/components/navbar'
export default {
 components:{
     navBar
 },
 data() {
     return {
         userinfo:null,
         grade:[]
     }
 },
 created() {
     this.$http.get('/userinfo',{
         params:{
             id:localStorage.getItem('id')
         }
     }).then(res=>{
         console.log(res.data);
this.userinfo=res.data.userInfo
     }
   ) 
   this.$http.get('/grade',{
         params:{
             id:localStorage.getItem('id')
         }
     }).then(res=>{
        
        this.grade= res.data.arr.split('，')
     })
 },
}

</script>
<style scoped>
.top {
    display: flex;
    justify-content: space-between;
}
.top .icon{
    width: 6em;
    height: 6em;
    margin-top: 20px;
}
.grade-items {
     padding: 20px;
    margin: 30px auto ;
    width: 90%;
    background-color: white;
}
.grade-items div {

    color:pink;
    font-size: 30px;
    margin-top: 10px;
}
.button{
    position: absolute;
    bottom: 0px;
    right: 0;

}
</style>